/* 第一步： 文件的扩展名叫做 .css 代表是一个样式文件，我们可以将之前HTML style里面书写的样式 单独提取到 index.css 这个文件*/
/* 引入一个外部的样式重置文件*/
@import url(./reset.css);

/* 书写自己的样式代码*/
.container {
    /*width: ; 当前的盒子的宽度不用设置，因为当前的显示器的宽度 100%*/

    height: 755px;
    background-color: #eeeeee;
    border: 1px solid red;
}

.container .content {
    width: 1200px;
    height: 650px;
    /*border: 1px solid #000;*/
    /*水平方向上的居中*/

    /*margin-left:(大盒子的宽度-小盒子的宽度)/2*/
    margin: 0 auto;

}

.container .content .title {
    height: 204px;
    line-height: 204px;
    /*border: 1px solid #000;*/
    font-size: 36px;
    color: #222222;
    text-align: center;






}
.clearfix{

}
.clearfix:after{
    display: block;
    content: '';
    clear: both;
}
/* 千万小心 浮动带来问题，父容器高度塌陷*/
.container .content .list li{
    /* 默认情况下盒子外扩 */
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;

    /*padding: 50px 50px;*/
    background-color: #ffffff;

    /*background-color: red;*/
    width: 180px;
    /* 因为外扩-50px*/
    height: 396px;
    margin-right: 26px;

    /*(280 + 26 ) * 4 = 1,224 > 1200 居中的盒子是 1200 是无法放得下里面4个浮动的子盒子，所以第四个子盒子，掉下来，从新的一行进行排列*/

    /* 396px*/
    text-align: center;
    float: left;
}

.container .content .list li h3{
    padding-top: 50px;
    padding-bottom: 30px;
    font-size: 22px;
    color: #222222;
}


.container .content .list li p{
    font-size: 16px;
    color: #666666;
    line-height: 32px;
}


.container .content .list li.last{
    margin-right: 0;

}
